@extends('admin.common.main')
@section('cnt')
<head>
    <link href="/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
    <meta charset="utf-8">
    <title>房源列表</title>
</head>
<body>
    <div class="row wrapper border-bottom white-bg page-heading">
        <div class="col-sm-4">
            <ol class="breadcrumb">
                <li>
                    <a href="index.html">主页</a>
                </li>
                <li>
                    <strong>房东列表</strong>
                </li>
            </ol>
        </div>
    </div>
    <div class="page-container">
        <div class="form-group">
            <form class="form-inline" method="get" action="{{route('admin.fangattr.index')}}">
                <input type="text" class="form-control" value="{{$params['startTime']}}" id="starttime" name="starttime"
                       autocomplete="off"
                       placeholder="开始日期">~
                <input type="text" class="form-control" value="{{$params['endTime']}}" id="endtime" name="endtime"
                       autocomplete="off"
                       placeholder="结束日期">
                <input type="text" placeholder="请输入关键词" name="name" id="name" class="form-control"
                       value="{{$params['name']}}">
                <button type="submit" class="btn btn-primary"> 搜索</button>
                <a class="btn btn-primary " href="{{route('admin.fangowners.create')}}">
                    <i class="Hui-iconfont">&#xe600;</i> 添加房东
                </a>
                <a class="btn btn-primary " href="{{route('admin.fangowners.export')}}">导出信息
                </a>
            </form>
        </div>
        <div class="mt-20">
            <table class="table table-hover table-striped" id="myTable">
                <thead>
                <tr class="text-c">
                    <th width="80">ID</th>
                    <th>姓名</th>
                    <th>身份证号</th>
                    <th>性别</th>
                    <th>年龄</th>
                    <th>手机</th>
                    <th>邮箱</th>
                    <th>家庭地址</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                @foreach($data as $k=>$v)
                    <tr class="text-c">
                        <td width="80">{{$v['id']}}</td>
                        <td>{{$v['name']}}</td>
                        <td>{{$v['card']}}</td>
                        <td>{{$v['sex']}}</td>
                        <td>{{$v['age']}}</td>
                        <td>{{$v['phone']}}</td>
                        <td>{{$v['email']}}</td>
                        <td>{{$v['address']}}</td>
                        <td class="td-manage">
                            <a href="#" onclick="show('{{$v['pic']}}')" data-target="#myModal" data-toggle="modal">查看身份证照片</a>
                            |
                            <a href="{{ route('admin.fangattr.edit',['id' => $v['id']]) }}"
                            >修改</a>
                            |
                            <a  href="{{ route('admin.fangattr.destroy',['id' => $v['id']]) }}"
                                class="delBut">删除</a>
                        </td>
                    </tr>
                @endforeach
                </tbody>
            </table>
        </div>
    </div>

    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title text-center" id="myModalLabel">预览身份证照片</h4>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-12">
                            <input type="hidden" id="lunbo_id">
                            <input type="hidden" id="lunbo_title">
                            <div class="form-group">
                                <img src="" id="pic1"/>
                                <img src="" id="pic2"/>
                                <img src="" id="pic3"/>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                </div>
            </div>
        </div>
    </div>



    @section('js')
        <script type="text/javascript" src="{{env('APP_URL')}}admin/lib/layer/2.4/layer.js"></script>
        <script type="text/javascript" src="{{env('APP_URL')}}admin/lib/My97DatePicker/4.8/WdatePicker.js"></script>
        <script type="text/javascript" src="{{env('APP_URL')}}admin/lib/laypage/1.2/laypage.js"></script>
        <script src="/js/moment-with-locales.min.js"></script>
        <script src="/js/bootstrap-datetimepicker.min.js"></script>
        <script>
            $('#starttime').datetimepicker({locale: 'zh-cn', format: 'YYYY-MM-DD HH:mm:ss',});
            $('#endtime').datetimepicker({locale: 'zh-cn', format: 'YYYY-MM-DD HH:mm:ss'});

            function show(pic) {
                var picArr = pic.split(',');
                $.each(picArr, function (i, item) {
                    var src = "{{env('APP_URL')}}"
                    $("#pic" + (i + 1)).attr("src", src + item);
                })
            }
            const _token = "{{ csrf_token() }}";
            $(".delBut").click(function () {
                var url = $(this).attr('href');
                $.ajax({
                    url,
                    type: "DELETE",
                    data: {_token},
                    dataType: "json",
                    success: function (res) {
                        if (res.code == 200) {
                            layer.msg(res.msg, {icon: 1, time: 1000});
                        } else {
                            layer.msg(res.msg, {icon: 2, time: 1000});
                        }
                        setTimeout(function () {
                            window.location.reload();
                        }, 1000);
                    }
                });
                return false;
            });
        </script>
    @endsection
</body>
</html>